<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      /**
       * 前端实现动画一般是这几种方式
       * 1、JavaScript：通过定时器setTimeout、setInterval，间隔来改改变元素样式，或者使用requestAnimationFrame
       *   让浏览器所有的动画有一个统一的刷新机制，节省系统资源、提高性能，改善视觉效果。
       *   还有cancelAnimationFrame停止动画的api
       *   为动画打造的setTimeout
       * 
       * 2、CSS3：transition、animation
       *   transition
       *   允许块级元素再制定时间内平滑的改变
       *   transition: property duration timing-function delay;
       *   property: 设置动画过渡效果的css属性名。
       *   duration: 完成过渡动画需要的时间
       *   time-function: 速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）
       *   deleay: 过渡动画合适开始（触发之后等待的时间）
       * 
       *   animation
       *   和transition相比，Animation作用于元素本身，而不是样式，可以使用关键帧的概念，更自由的动画效果
       *   animation: name duration timing-function delay iteration-count direction;
       *   先定义一个动画：可以通过from、to或者（百分比）来定义过程
       *   @keyframes mymove {
       *        from {}
       *        to {}
       *        0% {left:0px;}
                75% {left:100px;}
                100% {left:200px;}
       *   }
           name: 要绑定的动画的名称keyframe
           duration：动画完成做所用的时间
           timing-function：动画的速度曲线
           delay：动画出发后延迟时间执行
           iteration-count：动画播放的次数
           durection：是否应该轮流反方向播放
       * 3、HTML5：canvas、svg、webgl
       */
      // const oBox = document.getElementsByClassName("box")[0];
      // let wid = 100;
      // function addWidth() {
      //   // setInterval(() => {
      //   //     wid += 10
      //   //     oBox.style.width = wid + 'px'
      //   // }, 100);
      //   if (wid > 1000) return;
      //   wid += 1;
      //   oBox.style.width = wid + "px"; //每一帧向右移动1px
      //   animation();
      // }
      // let addWidthID;
      // function animation() {
      //   addWidthID = requestAnimationFrame(function () {
      //     addWidth();
      //   });
      // }
      // animation();
      // setTimeout(() => {
      //   cancelAnimationFrame(addWidthID);
      // }, 2000);


      console.log(111)
      new Promise((reslove) => {
        console.log(222)
        reslove(333)
      }).then(res=>{console.log(res)})

      // 微任务执行完后，执行requestAnimationFrame，然后渲染render
      requestAnimationFrame(function() {
        console.log(555)
      })
      setTimeout(() => {
        console.log(4444)
      requestAnimationFrame(function() {
        console.log(666)
      })
        console.log(777)
      }, 0);
    </script>
  </body>
</html>
